// 边框被 token-simulation 样式覆盖了
.djs-palette {
    border: solid 1px var(--palette-border-color) !important;
    border-radius: 2px;
    background: var(--palette-background-color);
}
.my-process-designer {
    display: flex;
    padding: 5px 0 10px 10px;
    width: 100%;
    height: 100%;
    flex-direction: column;
    box-sizing: border-box;
    .my-process-designer__header {
        width: 100%;
        min-height: 36px;
        .el-button {
            text-align: center;
        }
        .el-button-group {
            margin: 4px;
        }
        .el-tooltip__popper {
            .el-button {
                padding-right: 8px;
                padding-left: 8px;
                width: 100%;
                text-align: left;
            }
            .el-button:hover {
                color: #ffffff;
                background: rgb(64 158 255 / 80%);
            }
        }
        .align {
            position: relative;
            i {
                &::after {
                    content: '|';
                    position: absolute;
                    transform: rotate(90deg) translate(200%, 60%);
                }
            }
        }
        .align.align-left i {
            transform: rotate(90deg);
        }
        .align.align-right i {
            transform: rotate(-90deg);
        }
        .align.align-top i {
            transform: rotate(180deg);
        }
        .align.align-bottom i {
            transform: rotate(0deg);
        }
        .align.align-center i {
            transform: rotate(90deg);
            &::after {
                transform: rotate(90deg) translate(0, 60%);
            }
        }
        .align.align-middle i {
            transform: rotate(0deg);
            &::after {
                transform: rotate(90deg) translate(0, 60%);
            }
        }
    }
    .my-process-designer__container {
        display: inline-flex;
        width: 100%;
        flex: 1;
        .my-process-designer__canvas {
            position: relative;
            height: 100%;
            background: url('')
                repeat !important;
            flex: 1;
            div.toggle-mode {
                display: none;
            }
            div.bjs-container {
                a.bjs-powered-by {
                    display: none;
                }
            }
        }
        .my-process-designer__property-panel {
            z-index: 10;
            overflow: scroll;
            overflow-y: auto;
            height: 100%;
            * {
                box-sizing: border-box;
            }
        }
        svg {
            overflow: hidden;
            width: 100%;
            height: 100%;
            min-height: 100%;
        }
    }
}

//侧边栏配置
.djs-palette.open {
    .djs-palette-entries {
        div[class^='bpmn-icon-']::before,
        div[class*='bpmn-icon-']::before {
            line-height: unset;
        }
        div.entry {
            position: relative;
        }
        div.entry:hover {
            &::after {
                position: absolute;
                top: 0;
                right: -10px;
                bottom: 0;
                z-index: 100;
                display: inline-block;
                overflow: hidden;
                padding: 0 16px;
                width: max-content;
                font-size: 0.5em;
                border: 1px solid #cccccc;
                border-radius: 4px;
                text-decoration: inherit;
                background: #fafafa;
                box-shadow: 0 0 6px #eeeeee;
                content: attr(title);
                vertical-align: text-bottom;
                transform: translateX(100%);
                font-variant: normal;
                text-transform: none;
                box-sizing: border-box;
            }
        }
    }
}
pre {
    overflow: hidden;
    overflow-y: auto;
    margin: 0;
    margin-bottom: 30px;
    width: 100%;
    height: 100%;
    max-height: calc(60vh - 32px);
}
.hljs {
    word-break: break-word;
    white-space: pre-wrap;
}
.hljs * {
    font-family: Consolas, Monaco, monospace;
}
